<template>
  <div class="product-categories">
    <div class="container">
      <h1 class="page-title">{{ $t('routeTitles.product-categories') }}</h1>
      
      <div class="categories-grid">
        <el-card v-for="category in categories" :key="category.id" class="category-card">
          <div class="category-image">
            <el-image :src="category.image" fit="cover" />
          </div>
          <div class="category-content">
            <h3 class="category-title">{{ category.title }}</h3>
            <p class="category-description">{{ category.description }}</p>
            <div class="category-features">
              <div v-for="feature in category.features" :key="feature" class="feature-item">
                <el-icon><Check /></el-icon>
                <span>{{ feature }}</span>
              </div>
            </div>
            <el-button type="primary" class="view-more" @click="viewCategory(category.id)">
              了解更多
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const categories = ref([
  {
    id: 1,
    title: '食品包装袋',
    description: '专业食品级包装解决方案，确保食品安全和新鲜度',
    image: '/images/products/food-packaging.jpg',
    features: [
      '多层复合结构',
      '高阻隔性能',
      '食品级材料',
      '可定制印刷'
    ]
  },
  {
    id: 2,
    title: '工业包装袋',
    description: '耐用可靠的工业包装解决方案，保护产品安全运输',
    image: '/images/products/industrial-packaging.jpg',
    features: [
      '高强度材料',
      '防潮防尘',
      '耐撕裂',
      '大容量设计'
    ]
  },
  {
    id: 3,
    title: '特殊定制包装',
    description: '根据客户需求定制的专业包装解决方案',
    image: '/images/products/custom-packaging.jpg',
    features: [
      '个性化设计',
      '特殊尺寸',
      '独特印刷',
      '专业咨询'
    ]
  }
])

const viewCategory = (id) => {
  router.push(`/product-categories/${id}`)
}
</script>

<style lang="scss" scoped>
.product-categories {
  padding: 2rem 0;
  
  .page-title {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    font-size: 2rem;
  }
  
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    padding: 1rem;
  }
  
  .category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .category-image {
      height: 250px;
      overflow: hidden;
      border-radius: 4px;
      margin-bottom: 1.5rem;
      
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    
    .category-content {
      .category-title {
        font-size: 1.5rem;
        color: var(--text-primary);
        margin-bottom: 1rem;
      }
      
      .category-description {
        color: var(--text-regular);
        margin-bottom: 1.5rem;
        line-height: 1.6;
      }
      
      .category-features {
        margin-bottom: 1.5rem;
        
        .feature-item {
          display: flex;
          align-items: center;
          margin-bottom: 0.5rem;
          color: var(--text-regular);
          
          .el-icon {
            color: var(--success-color);
            margin-right: 0.5rem;
          }
        }
      }
      
      .view-more {
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .product-categories {
    padding: 1rem 0;
    
    .page-title {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .categories-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 0.5rem;
    }
    
    .category-card {
      .category-image {
        height: 200px;
      }
    }
  }
}
</style> 